// colors
$colors: (
  'primary': #2d66e6,
  'blue': #4877fb,
  'blue-3': #409eff,
  'blue-1': #9ac7f8,
  'blue-2': #d0ddfc,
  'red': #e62d2d,
  'danger': #fb4848,
  'green': #4ea415,
  'green-1': #03a6a4,
  'info': #606266,
  'grey': #909399,
  'grey-1': #c0c4cc,
  'grey-2': #d3d4d6,
  'grey-3': #dcdfe6,
  'grey-4': #ebeef5,
  'white': #ffffff
);

// font-size
$base-font-size: 16px;
$font-sizes: (
  xxs: 0.625,
  // 10px
    xs: 0.75,
  // 12px
    sm: 0.875,
  // 14px
    md: 1,
  // 16px
    lg: 1.125,
  // 18px
    xl: 1.25,
  // 20px
    xxl: 1.5,
  // 24px
    big: 2.5,
  // 40px
);

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
);

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);

// spacing
$spacing-base-size: 16px;
$spacing-types: (
  m: margin,
  p: padding
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3
);

// 0-10px
$border-radius-sizes: (
  0: 0,
  1: 0.0625,
  2: 0.125,
  3: 0.1875,
  4: 0.25,
  5: 0.3125,
  6: 0.375,
  7: 0.4375,
  8: 0.5,
  9: 0.5625,
  10: 0.625
);
